<!--
 * @Author: wrh123 482597539@qq.com
 * @Date: 2024-01-10 15:02:49
 * @LastEditors: wrh123 482597539@qq.com
 * @LastEditTime: 2024-01-24 10:06:44
 * @FilePath: /vue-admin/src/views/Login/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="login_body">
    <div class="box_1">
      <div class="section_1">
        <el-row type="flex" justify="center" style="margin-top: 150px;">
          <span class="spanTitle">SUPERTRADER</span>
        </el-row>
        <el-row type="flex" justify="center" style="margin-top: 50px;">
          <div style="font-size: 20px; color: #fff;">请输入你的账号进行登陆</div>
        </el-row>
        <el-row type="flex" justify="center" style="margin-top: 50px;">
          <el-form ref="ruleForm" :model="ruleForm" :rules="rules">
            <el-form-item prop="phone">
              <el-input ref="adcdree" v-model="ruleForm.phone" placeholder="请输入你的账号" />
            </el-form-item>
            <el-form-item prop="password" style="margin-top: 20px;">
              <el-input v-model="ruleForm.password" style="border-radius: 31px;" placeholder="请输入你的密码" />
            </el-form-item>
            <el-form-item style="margin-top: 20px;">
              <el-checkbox v-model="ruleForm.rememberMe">记住账号</el-checkbox>
            </el-form-item>
            <el-form-item style="margin-top: 20px;">
              <el-row type="flex" justify="center">
                <el-button style="width: 200px;" type="primary" @click="submitBTn">登陆</el-button>
              </el-row>
            </el-form-item>
          </el-form>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
export default {

  name: 'Login',
  components: {
  },
  data() {
    return {

      ruleForm: {
        password: null,
        phone: null,
        rememberMe: false
      },
      rules: {
        password: [
          { required: true, message: '密码不可以为空', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '手机号不可以为空', trigger: 'blur' },
          // { required: true, pattern: /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/, message: '请输入正确的手机号', trigger: 'blur' }
        ]
      }

    }
  },

  mounted() {
    // 检查本地存储中是否有记住的用户名和密码
    const rememberedUsername = localStorage.getItem('phone')
    const rememberedPassword = localStorage.getItem('password')
    if (rememberedUsername && rememberedPassword) {
      this.ruleForm.phone = rememberedUsername
      this.ruleForm.password = rememberedPassword
      this.ruleForm.rememberMe = true
    }
  },
  methods: {
    // 记住账号
    changeValue(val) {
      // // console.log(val)
      if (val) {
        console.log(this.$refs.adcdree)
      }
    },
    // 登陆
    async submitBTn() {
      if (this.ruleForm.rememberMe) {
        localStorage.setItem('phone', this.ruleForm.phone)
        localStorage.setItem('password', this.ruleForm.password)
      } else {
        localStorage.removeItem('phone')
        localStorage.removeItem('password')
      }
      await this.$refs.ruleForm.validate()
      await this.$store.dispatch('user/login', this.ruleForm)

      // 跳转首页
      this.$router.push({ path: '/' })
    }

  }
}

</script>

<style scoped lang="scss">
::v-deep .el-input__inner {
  width: 300px;
  background-color: #36373B;
  color: #fff;
  border: none;
  border-radius: 30px;
}

.login_body {
  background-color: rgba(255, 255, 255, 1);
  position: relative;
  width: 100vw;
  height: 100vh;

  .box_1 {
    width: 100vw;
    height: 100vh;
    background: url("../../assets/login_hero.png") 100% no-repeat;
    background-size: 100% 100%;

    .section_1 {
      width: 50vw;
      height: 100vh;
      float: right;
      background-color: rgba(36, 37, 38, 0.59);

      .spanTitle {
        width: 483px;
        height: 73px;
        font-size: 46px;
        font-family: DIN, DIN;
        font-weight: 500;
        color: #FFFFFF;
        line-height: 65px;
        text-align: center;
      }
    }
  }
}

@media(max-width: 768px) {
  .section_1 {
    width: 100vw !important;
    background-color: black !important;
  }
}
</style>
